<template>
  <div class="content">
    <div class="title">
      <div class="text">
        <div class="font">总支付(元)</div>
        <div class="money">126,560</div>
      </div>
    </div>
    <div class="echart">
      <div id="OverAll" style="width:100%;height:100px;" />
    </div>
    <div class="title">
      <div class="text">
        <div class="font">本月支出(元)&nbsp;&nbsp;&nbsp;<span class="number">¥ 12,423</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OverAll',
  data() {
    return {

    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawPie()
    })
  },
  methods: {
    drawPie() {
      const myChart = this.$echarts.init(document.getElementById('OverAll'))
      const option = {
        // backgroundColor: '#00265f',
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: false,
          data: ['接入率'],
          align: 'right',
          right: 10,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35
        },
        grid: {
          left: '-50px',
          right: '0',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10 '],
          axisLine: {
            show: false,
            lineStyle: {
              color: '#063374',
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            textStyle: {
              color: '#00c7ff'
            }
          }
        }],
        yAxis: [{
          show: false,
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#00c7ff',
              width: 1,
              type: 'solid'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#063374'
            }
          }
        }],
        series: [{
          name: '总支付',
          type: 'bar',
          data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
          barWidth: 8, // 柱子宽度
          barGap: 1, // 柱子之间间距
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#32C5FF'
              }, {
                offset: 1,
                color: '#005193'
              }]),
              opacity: 1
            }
          }
        }]
      }
      myChart.setOption(option, window.onresize = myChart.resize)
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  // color: #ffffff;
  padding: 10px;
  .title{
    display: flex;
    .text{
      flex: 1;
      text-align: left;
      .font{
        font-size: 12px;
        font-weight: 400;
        color: #F7B500;
        padding: 5px 0;
        .number{
          font-size:14px;
          font-weight:500;
          color:rgba(255,255,255,0.85);
        }
      }
      .money{
         font-size: 12px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .echart{
    margin: -45px 0 16px 0;
  }
}
</style>
